<template>
  <!-- 通用的标题图片组件-放右边的 -->
  <div class="title-box-view">
    <div class="title-box-view-main">
      <div class="main-line">
        <div class="linetwo">{{ boxmessage.titleMes.titleDes }}</div>
        <div class="lineone">{{ boxmessage.titleMes.name }}</div>
      </div>
      <div class="main-box">
        <div class="slot-box">
          <div class="ganggang"></div>
          <div class="no-ganggang-box">
            <slot name="boxone-slot"></slot>
          </div>
        </div>
      </div>
    </div>
    <div class="title-box-view-img">
      <img
        v-if="boxmessage.titleMes.titleImg"
        :src="require('@/assets/' + boxmessage.titleMes.titleImg)"
      />
      <!-- <img src="../../assets" /> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    boxmessage: {
      type: Object,
      default: () => {
        return {
          titleMes: {
            name: "物联环境数据情况",
            titleImg: "templeone/test-icon.png",
            titleDes: "ERIEF INTRODUCTION"
          },
          // 组件信息
          comList: [
            {
              // 组件类型a1-简介组件
              comType: "a1",
              url: "https//test.com"
            }
          ],
          height: 35
        };
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    boxmessage: {
      handler: function (newval) {
        if (newval) {
          let newlist = newval;
          // newlist.titleMes.titleImg = require('@/assets/' + newlist.titleMes.titleImg)
          this.boxmessage = newlist;
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getimgtest(e) {
      // let newurl = () => import("@/assets" + e);
      // return newurl;
    }
  }
};
</script>

<style lang="scss" scoped >
    @import "~@/styles/variables.scss";
.title-box-view {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  .title-box-view-img {
    width: 50px;
    height: 50px;
    margin-right: -25px;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid #01816b;
      background-color: #181a1c;
    }
  }
  .title-box-view-main {
    width: 100%;
    height: 100%;
    .main-line {
      height: 50px;
      width:100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      flex-direction: row;
      align-items: center;
      color: $textColor;
      // background-color: aquamarine;
      .lineone {
        font-size: 20px;
        text-shadow:0px 0px 6px #00DEB4;
      }
      .linetwo {
        font-size: 12px;
      }
    }
    .main-box {
      width:100%;
      height: calc(100% - 50px);
      position: relative;
      .slot-box {

        position: absolute;
        top: 0;
        left: 0;
        width: 98%;
        padding: 0 1%;
        height: 100%;
        // background-color: hsl(202, 32%, 15%, 0.5);
        background-color: rgba(0, 0, 0, 0.4);
        .ganggang {
          width: 100%;
          height: 15px;
          border-radius: 15px;
          background-image: linear-gradient(#044a48, #11ada8, #05282c);
          opacity: 0.5;
        }
        .no-ganggang-box{
          width: 100%;
          height:calc(100% - 15px) ;
          padding:0 10px 10px;
        }
      }
    }
  }
}
</style>
